<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全屏滚动贴合+平滑过渡效果</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    .box {
      width: 100vw;
      height: 100vh;
      overflow-x: hidden;
      overflow-y: scroll;
      /* 设置滚动条贴合的方式：沿 Y 轴滚动，mandatory 表示强制滚动 */
      scroll-snap-type: y mandatory;
      /* 这个属性配置HTML的A标签锚点链接可以实现平滑的scroll滚动效果 */
      /* scroll-behavior: smooth; */
    }

    .box>div {
      width: 100%;
      height: 100vh;
      /* 设置下一页的内容会滚动贴合到顶部 */
      scroll-snap-align: start;
      /* 设置背景图片 */
      align-items: center;
      /* 通过 var() 函数调用自定义属性获取每个 div 的背景色 */
      background: var(--img);
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      height: 100vh;
      overflow: hidden;
      place-items: center;
    }
    .btns {
      width: 30px;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .btns .btn {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: var(--bgc);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: white;
      opacity: 0.4;
      cursor: pointer;
    }
    .btns .active {
      width: 28px;
      height: 28px;
      opacity: 0.8;
      box-shadow: 0 0 10px rgb(249, 248, 248);
    }

  </style>
</head>

<body>
  <div class="box">
    <div class="img1" style="--img: url(./static/images/01.jpg);"></div>
    <div class="img2" style="--img: url(./static/images/02.jpg);"></div>
    <div class="img3" style="--img: url(./static/images/03.jpg);"></div>
    <div class="img4" style="--img: url(./static/images/04.jpg);"></div>
    <div class="img5" style="--img: url(./static/images/05.jpg);"></div>
    <div class="img6" style="--img: url(./static/images/06.jpg);"></div>
    <div class="img7" style="--img: url(./static/images/07.jpg);"></div>
  </div>
  <div class="btns">
    <div class="btn active" style="--bgc: skyblue">1</div>
    <div class="btn" style="--bgc: #62F41C">2</div>
    <div class="btn" style="--bgc: #F2F829">3</div>
    <div class="btn" style="--bgc: #16F8BD">4</div>
    <div class="btn" style="--bgc: #3453E8">5</div>
    <div class="btn" style="--bgc: #AF26F0">6</div>
    <div class="btn" style="--bgc: #F71A7C">7</div>
  </div>
  <script>
    // 获取页面的可视区域高度
    const pageHight = window.innerHeight
    // 监听 box 的滚动条滚动事件，根据当前滚动条动态调整左侧的按钮样式
    const box = document.querySelector('.box')
    box.addEventListener('scroll', getScrollTop)
    let timer  // 防抖
    function getScrollTop(e) {
      timer && clearTimeout(timer)
      timer = setTimeout(() => {
        let scrollTop = e.target.scrollTop
        let img = Math.floor(scrollTop / pageHight + 1)
        // console.log('正在看的图片', img);
        // console.log('页面滚动了', e.target.scrollTop);
        img < 8 && checkBtnStyle(img)
      }, 300);
    }
    // 修复左侧 btn 的样式
    function checkBtnStyle(innerText) {
      const elList = btns.getElementsByTagName('div')
      const newList = Array.from(elList)
      newList.forEach(item => {
        item.classList = 'btn'
      })
      elList[innerText - 1].classList = 'btn active'
    }

    // 给右侧的图片导航按钮添加点击事件
    // 仅获取按钮的父盒子就行了，点按钮通过冒泡可以获取 .btn 的事件
    const btns = document.querySelector('.btns')
    const btnsClick = e => {
      // 通过 e.target.innerText 可以获取到是点击了哪个按钮
      checkBtnStyle(e.target.innerText)   // 修复左侧按钮的样式
      // 再获取到对应的图片（div）元素
      const img = document.querySelector(`.img${e.target.innerText}`)
      // 通过 scrollIntoView + behavior: 'smooth' 实现滚动条的平滑过渡
      img.scrollIntoView({
        behavior: 'smooth'
      })
    }
    btns.addEventListener('click', btnsClick)

  </script>

</body>

</html>